<template>
  <div :style="{'--opacity':opacity}">
    <div class="time-line-controll">
      <el-button @click="addNewTimeLine">添加一个新的时间线</el-button>
    </div>
    <div class="main-window">
      <div>
        <transition name="el-fade-in">
          <vue-timeline-update
            v-show="addNew"
            class="time-line"
            :title="newTimeLine.title"
            :description="newTimeLine.description"
            :thumbnail="newTimeLine.coverImg"
            :category="newTimeLine.category"
            icon="code"
            :color="newTimeLine.color"
            theme="light"
          />
        </transition>

        <!-- Latest update -->
        <vue-timeline-update
          v-for="TimeLine in timeLines"
          :key="TimeLine.id"
          class="time-line"
          :date="TimeLine.date"
          :title="TimeLine.title"
          :description="TimeLine.description"
          :thumbnail="TimeLine.coverImg"
          :category="TimeLine.category"
          icon="code"
          :color="TimeLine.color"
          theme="light"
        />
      </div>
      <transition name="el-fade-in">
        <div v-show="addNew" class="time-line-form">
          <el-form>
            <el-form-item label="标题:" class="form-title">
              <el-input v-model="newTimeLine.title" placeholder="在这里输入标题" style="width: 400px" />
            </el-form-item>
            <el-form-item label="类别:" class="form-title">
              <el-input v-model="newTimeLine.category" placeholder="在这里输入类别" style="width: 400px" />
            </el-form-item>
            <el-form-item label="封面:" class="form-title">
              <el-input v-model="newTimeLine.coverImg" placeholder="封面的url路径,可上传可为空" style="width: 300px" />
              <el-button style="margin-left: 30px" :loading="uploadingImg" @click="uploadImg">上传</el-button>
            </el-form-item>
            <el-form-item label="颜色:" class="form-title">
              <el-select v-model="newTimeLine.color" placeholder="请选择颜色">
                <el-option v-for="color in colors" :key="color.value" :label="color.value" :value="color.value">
                  <div style="float: left">{{ color.value }}</div>
                  <div class="form-inner-circle" :style="{'--color':color.value}" />
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容:" class="form-title">
              <el-input v-model="newDesc" :rows="8" type="textarea" placeholder="在这里输入内容  支持markdown语法" style="width: 400px" />
            </el-form-item>
            <el-button type="success" style="width: 100%;margin-left: 20px" @click="submitTimeLine">提交</el-button>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { uploadImgByUrl } from '@/api/upload'

const { getAllTimeLine } = require('@/api/timeLine')
import MarkdownIt from 'markdown-it'
import { uploadTimeline } from '@/api/timeLine'
export default {
  name: 'TimeLine',
  data() {
    return {
      md: '',
      addNew: false,
      showCreateDialog: true,
      uploadingImg: false,
      timeLines: [],
      newDesc: '',
      newTimeLine: {
        title: '',
        category: '',
        color: '',
        description: '',
        coverImg: ''
      },
      colors: [{ value: 'black' }, { value: 'blue' }, { value: 'green' }, { value: 'orange' }, { value: 'purple' }, { value: 'red' }, { value: 'turquoise' }, { value: 'white' }],
      opacity: 'white'
    }
  },
  watch: {
    newDesc() {
      this.newTimeLine.description = this.md.render(this.newDesc)
    }
  },
  created() {
    this.md = new MarkdownIt()
    this.Init()
  },
  methods: {
    // 初始化函数
    Init() {
      getAllTimeLine().then((res) => {
        console.log(res)
        this.timeLines = res.data.data
      })
    },
    finishCreateTimeLine() {
      this.newTimeLine.description = ''
      this.newTimeLine.coverImg = ''
      this.newTimeLine.color = ''
      this.newTimeLine.title = ''
      this.newTimeLine.category = ''
      this.newDesc = ''
      this.addNew = false
    },
    addNewTimeLine() {
      this.addNew = !this.addNew
    },
    uploadImg() {
      this.uploadingImg = true
      const updateImgByUrl = this.newTimeLine.coverImg
      uploadImgByUrl(updateImgByUrl).then((res) => {
        this.$message.success('图片上传成功！')
        this.newTimeLine.coverImg = res.data.data
      }).finally(() => {
        this.uploadingImg = false
      })
    },
    submitTimeLine() {
      uploadTimeline(this.newTimeLine).then((res) => {
        this.$message.success('上传成功！')
        this.finishCreateTimeLine()
        this.Init()
      })
    }
  }
}
</script>

<style scoped>
.gb-vue-timeline-update__description h1 h2 h3 h4 h5 h6{
  line-height: 10px !important;
}
.time-line{
  max-width: 900px;
}
.main-window {
  display: flex;
  flex-direction: row;
  position:relative;
  background-color: var(--opacity);
}
.time-line-form {
  width: 550px;
  background-color: #ffecec;
  position: absolute;
  right: 0;
  padding-right:  40px;

}
.form-title{
  margin-left: 20px !important;
}
.form-inner-circle {
  float: right;
  background-color: var(--color);
  width:10px;
  height: 10px;
  border-radius: 40%;
  margin-top: 10px;
}
</style>
